<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="f1">
                <feComponentTransfer in="SourceGraphic">
                    <feFuncR type="table" tableValues="0 0.25 1"></feFuncR>
                </feComponentTransfer>
            </filter>
        </defs>
        <rect x="10" y="10" width="40" height="30" fill="rgb(11.25,0,0)" filter="url(#f1)"/>
        <rect x="10" y="50" width="40" height="30" fill="rgb(11.25,0,0)" />
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="f2">
                <feComponentTransfer in="SourceGraphic">
                    <feFuncR type="linear" slope="1.2" intercept="0"></feFuncR>
                    <feFuncG type="linear" slope="1.2" intercept="0"></feFuncG>
                    <feFuncB type="linear" slope="1.2" intercept="0"></feFuncB>
                </feComponentTransfer>
            </filter>
        </defs>
       <image href="../imgs/4.png" x="0" y="0" height="100" width="100" filter="url(#f2)"/>
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <linearGradient id="l3"
                x1="0" y1="0"
                x2="1" y2="0"
            >
                <stop offset="0" stop-color="#f00"></stop>
                <stop offset="1" stop-color="#0f0"></stop>    
            </linearGradient>
            <filter id="f3">
                <feComponentTransfer in="SourceGraphic">
                    <feFuncR type="linear" slope="5" intercept="0" ></feFuncR>
                    <feFuncG type="linear" slope="5" intercept="0" ></feFuncG>
                </feComponentTransfer>
            </filter>
        </defs>
       <rect x="20" y="10" width="60" height="40" fill="url(#l3)" filter="url(#f3)"/>
       <rect x="20" y="55" width="60" height="40" fill="url(#l3)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="f4">
                <feComponentTransfer in="SourceGraphic">
                    <feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
                    <feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
                    <feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
                </feComponentTransfer>
            </filter>
        </defs>
       <rect x="20" y="10" width="60" height="40" fill="rgb(100,0,0)" filter="url(#f3)"/>
       <rect x="20" y="55" width="60" height="40" fill="rgb(100,0,0)" />
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
          
            <filter id="f5">
                <feComponentTransfer in="SourceGraphic">
                    <feFuncR type="table" tableValues="0 0.3 0.8 1"></feFuncR>
                </feComponentTransfer>
            </filter>
        </defs>
       <rect x="20" y="10" width="60" height="40" fill="rgb(210,0,0)" filter="url(#f5)"/>
       <rect x="20" y="55" width="60" height="40"  fill="rgb(210,0,0)" />
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
          
            <filter id="f6">
                <feComponentTransfer in="SourceGraphic">
                    <feFuncR type="linear"  slope="1.2"></feFuncR>
                    <feFuncG type="linear"  slope="1.2"></feFuncG>
                    <feFuncB type="linear"  slope="1.2"></feFuncB>
                </feComponentTransfer>
            </filter>
        </defs>
       <rect x="20" y="10" width="60" height="40" fill="rgb(200,100,50)" filter="url(#f6)"/>
       <rect x="20" y="55" width="60" height="40"  fill="rgb(200,100,50)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 200 200">
        <defs>
          
            <filter id="f7">
                <feComponentTransfer in="SourceGraphic">
                    <feFuncR type="linear"  slope="1" intercept=".25" ></feFuncR>
                    <feFuncG type="linear"  slope="1" intercept=".25" ></feFuncG>
                    <feFuncB type="linear"  slope="1" intercept=".25" ></feFuncB>
                </feComponentTransfer>
            </filter>

            <filter id="f72">
                <feComponentTransfer in="SourceGraphic">
                    <feFuncR type="linear"  slope="2" ></feFuncR>
                    <feFuncG type="linear"  slope="2" ></feFuncG>
                    <feFuncB type="linear"  slope="2" ></feFuncB>
                </feComponentTransfer>
            </filter>
        </defs>
       <image href="../imgs/4.png" x="20" y="10" width="60" height="40" filter="url(#f7)"/>
       <image href="../imgs/4.png" x="20" y="55" width="60" height="40"  filter="url(#f72)" />
       <image href="../imgs/4.png" x="20" y="95" width="60" height="40" />
    </svg>

    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <image id="img1" href="https://img0.baidu.com/it/u=2381213954,401093073&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=281"
          x="0" y="0" width="100" height="100"/>
     
  </svg>
  <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
          <filter id="filter81" >
            <feColorMatrix in="SourceGraphic"
              type="matrix"
              values="
                1.5 0 0 0 -.12
                0 1.5 0 0 -.12
                0 0 1.5 0 -.12
                0 0 0 1 0
              ">
              </feColorMatrix>
          </filter>
        </defs>
    
        <image id="img1" href="https://img0.baidu.com/it/u=2381213954,401093073&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=281"
          x="0" y="0" width="100" height="100" filter="url(#filter81)"/>
     
  </svg>

  <svg width="400" height="400" viewBox="0 0 100 100">
    <defs>
        <filter id="filter82" >
          <feComponentTransfer in="">
            <feFuncR type="linear" slope="1.5" intercept="-0.12"></feFuncR>
            <feFuncG type="linear" slope="1.5" intercept="-0.12"></feFuncG>
            <feFuncB type="linear" slope="1.5" intercept="-0.12"></feFuncB>
          </feComponentTransfer>
        </filter>
      </defs>
  
      <image id="img1" href="https://img0.baidu.com/it/u=2381213954,401093073&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=281"
        x="0" y="0" width="100" height="100" filter="url(#filter82)"/>
   
</svg>

    <hr>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="f91" >
                <feComponentTransfer >
                    <feFuncR type="table" tableValues="0 1"></feFuncR>
                    <feFuncG type="table" tableValues="1 1"></feFuncG>
                </feComponentTransfer>
            </filter>
        </defs>
    
        <rect x="10" y="10" width="30" height="30" fill="rgb(255,0,0)" filter="url(#f91)"/>
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="f92" >
                <feColorMatrix type="matrix"
                    values="
                        1 0 0 0 2
                        0 1 0 0 2
                        0 0 1 0 0
                        0 0 0 1 0
                    "
                ></feColorMatrix>
            </filter>
        </defs>
    
        <rect x="10" y="10" width="30" height="30" fill="rgba(0,0,0,1)" filter="url(#f92)"/>
    </svg>

    <script src="index.js"></script>
</body>
</html>